<template>
  <div class="field" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}">{{data.label}}</label>
    <textarea  :name="data.name" v-model="val" :placeholder="placeholder"></textarea>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';

  export default {
    data() {
      return {
        val: ''
      }
    },
    methods: {},
    watch: {
      val: function(val, old) {
        if(!this.data || this.data.readonly){
          return;
        }
        this.$emit('onchange', {name: this.data.name, value:val, raw: this.data});
      },
      data:{
        immediate: true,
        handler(val) {
          this.val = this.data.value;
        }
      },
    },
    computed: {
      placeholder() {
        return this.data.placeholder || `请输入${this.data.label}`
      }
    },
    props: {
      data:{
        type: Object,
        default(){
          return {}
        }
      }
    },
  };
</script>

<style scoped>
  .field {}
</style>
